<template>
  <div class="table-container">
    <catch-table :form-create="formCreate" v-bind="table"/>

    <!-- 详细信息 -->
    <el-dialog title="项目详情" :visible.sync="dialogVisible" width="60%" style="margin-bottom: 100px" :before-close="handleClose">
      <el-descriptions border title="项目基本信息" :column="2">
        <el-descriptions-item label="项目名称">{{ e.project_name }}</el-descriptions-item>
        <el-descriptions-item label="项目地点">{{ e.project_city_name }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ e.project_city_address }}</el-descriptions-item>
        <el-descriptions-item label="建设单位">{{ e.build_name }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ e.lian_xi }}</el-descriptions-item>
        <el-descriptions-item label="项目工期">{{ e.project_time }}</el-descriptions-item>
        <el-descriptions-item label="截止时间">{{ e.end_date }}</el-descriptions-item>
        <el-descriptions-item label="加急">{{ e.need_jia_ji_name }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions border title="设计目标和人群" :column="2" style="margin-top: 30px">
        <el-descriptions-item label="项目愿景">{{ e.project_yuan_jing }}</el-descriptions-item>
        <el-descriptions-item label="目标人群">{{ e.for_person }}</el-descriptions-item>
        <el-descriptions-item label="需解决的问题">{{ e.for_question }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions border title="设计范围与内容" :column="2" style="margin-top: 30px">
        <el-descriptions-item label="设计阶段">{{ e.design_stage_name }}</el-descriptions-item>
        <el-descriptions-item label="设计领域">{{ e.design_field }}</el-descriptions-item>
        <el-descriptions-item label="具体设计内容">{{ e.design_content }}</el-descriptions-item>
        <el-descriptions-item label="规划指标">{{ e.gui_hua_zhi_biao }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions border title="设计规范和标准" :column="2" style="margin-top: 30px">
        <el-descriptions-item label="设计规范">{{ e.she_ji_gui_fan }}</el-descriptions-item>
        <el-descriptions-item label="技术标准">{{ e.ji_shu_biao_zhun }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions border title="项目进度和费用" :column="2" style="margin-top: 30px">
        <el-descriptions-item label="关键里程碑">{{
            e.li_cheng_bei
          }}
        </el-descriptions-item>
        <el-descriptions-item label="设计费">{{
            e.design_fee
          }}
        </el-descriptions-item>
        <el-descriptions-item label="其它费用">{{
            e.other_fee
          }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        border
        title="文件提交和评选"
        :column="2"
        style="margin-top: 30px"
      >
        <el-descriptions-item label="上传设计相关文件">
          <el-image
            style="width: 100px; height: 100px"
            v-for="(item, index) in e.wen_jian"
            :key="index"
            :src="item.url"
            :preview-src-list="[item.url]"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="需提交的文件">{{
            e.need_file
          }}
        </el-descriptions-item>
        <el-descriptions-item label="详选流程">{{
            e.ping_flow
          }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions v-if="e.status != 1" border title="审核" :column="2" style="margin-top: 30px;">
        <el-descriptions-item label="审核状态">{{ e.status_name }}</el-descriptions-item>
        <el-descriptions-item label="审核备注">{{ e.status_note }}</el-descriptions-item>
      </el-descriptions>

      <div v-if="e.status == 1" style="margin: 30px;">
        <el-input type="textarea" :rows="6" placeholder="备注" v-model="e.status_note">
        </el-input>
        <div style="display: flex;justify-content: center;margin-top: 20px">
          <el-button type="danger" @click="statusChange(e.id,3)">拒绝</el-button>
          <el-button type="primary" style="margin-left: 150px;" @click="statusChange(e.id,2)">通过</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 公司 -->
    <el-dialog title="公司" :visible.sync="matchDialogVisible" width="60%" style="margin-bottom: 100px" :before-close="handleCloseMatch">
      <template>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <!--          <el-table-column type="selection" width="55"></el-table-column>-->
          <el-table-column prop="company_name" label="公司名" width="120"></el-table-column>
          <el-table-column prop="city_name" label="地址"></el-table-column>
        </el-table>
      </template>
      <!--      <el-button type="primary" @click="matchUser">提交</el-button>-->
    </el-dialog>
  </div>
</template>

<script>
import renderTable from '@/views/render-table-form'

export default {
  mixins: [renderTable],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      multipleSelection_id: [],
      need_audit: 1,
      status_note: '',
      tableFrom: '',
      e: { status_note: '' },
      dialogVisible: false,
      need_id: 0,
      matchDialogVisible: false
    }
  },

  mounted() {
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val

      // 关键修复：每次选择变化时先清空数组，再重新添加当前选中的ID
      this.multipleSelection_id = []

      // 遍历当前选中的行，收集ID
      this.multipleSelection.forEach((item) => {
        this.multipleSelection_id.push(item.id)
      })

      // 打印当前选中的所有ID
      console.log('当前选中的公司ID：', this.multipleSelection_id)
    },

    matchUser() {
      this.$http({
        url: 'Need/matchUser',
        method: 'POST',
        data: {
          need_id: this.need_id,
          user_company_id: this.multipleSelection_id
        }
      }).then((r) => {
        this.matchDialogVisible = false
        // this.tableData = r.data
      })
    },

    indexCompanyByNeed(need_id) {
      this.need_id = need_id
      this.tableData = []
      this.$http({
        url: '/UserCompany/indexByNeed',
        method: 'POST',
        data: {
          need_id: need_id
        }
      }).then((r) => {
        this.tableData = r.data
      })
    },

    beforeSubmit(row) {
      if (row.form.parent_id instanceof Array) {
        row.form.parent_id = row.form.parent_id.length > 0 ? row.form.parent_id.pop() : 0
      }
      return row
    },
    handleView(e) {
      this.e = e
      this.dialogVisible = true
    },
    handleCloseMatch(e) {
      this.e = e
      this.matchDialogVisible = false
    },

    handleMatchUserCompany(e) {
      this.e = e
      this.indexCompanyByNeed(e.id)
      this.matchDialogVisible = true
    },

    statusChange(id, status) {
      this.$http({
        url: '/Need/audit',
        method: 'POST',
        data: {
          id: id,
          status: status,
          status_note: this.e.status_note
        }
      }).then((r) => {
        this.dialogVisible = false
        this.$message.success('操作成功')
        this.$refs[this.table.ref].getList()
      })
    },

    zidingyi(e) {
      console.log(e)
    }
  }
}
</script>
